<script lang="ts" setup>
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import defaultImg from '@/home/assets/home/default.png';
import Box from './Box.vue';
import Loading from '@/home/components/Loading.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';

const { $fetch } = useFetch();

const changeFocus = async (userId: string, isFocus: boolean) => {
  const { isSuccess } = await $fetch(isFocus ? '/user/cancel' : '/user/focus', {
    autoGotoLogin: true,
    data: { userId },
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  refresh();
};

const { data: listing, refresh, pending } = useAsyncData(
  'home:developer',
  () => $fetch('/developer/hot_developers', { data: { pageNo: 1, size: 5 } }),
  {
    transform: (data) => data.records ?? [],
  },
);
</script>

<template>
  <section class="page-home-developer mt-20">
    <Box :title="$t('home.home.developer.title')" :more-text="$t('home.home.developer.more')" more-link="/explore/developer">
      <ul>
        <LoadingBox :loading="pending">
          <template v-if="listing?.length > 0">
            <li v-for="item in listing" :key="item.userId" class="group mt-20 flex justify-between border-b-1 border-hex-f7f7f7 pb-20 last:(border-b-0 pb-0)">
              <div class="h-52 w-52">
                <img :data-src="item.photo ?? defaultImg" class="lozad size-full rounded-full object-cover">
              </div>

              <div class="w-248">
                <div class="h-28 flex items-center justify-between">
                  <a :href="item.jump" target="_blank">
                    <div class="line-clamp-1 max-w-160 text-16 color-hex-292929 font-500 leading-28 group-hover:(color-hex-345de2)">{{ item.nickname }}</div>
                  </a>
                  <button
                    type="button"
                    class="h-28 cursor-pointer border-1 border-hex-345de2 rounded-6 bg-hex-ffffff px-24 text-center text-12 color-hex-345de2 leading-28 hover:(bg-hex-345de2 color-hex-fff)"
                    @click="changeFocus(item.userId, item.isFocus)"
                    v-if="!item.focusButtonDisabled"
                  >
                    {{ item.isFocus ? $t('home.common.follow.cancel') : $t('home.common.follow.ok') }}
                  </button>
                </div>

                <p class="line-clamp-1 mt-6 h-22 text-14 color-hex-575757 font-400 leading-22" :title="item.profile">{{ item.profile }}</p>
              </div>
            </li>
          </template>
          <template v-else>
            <li class="mt-20 text-center color-hex-8b8b8b">{{ $t('home.common.emptyContent') }}</li>
          </template>

          <template #loading>
            <li class="mt-20 flex-x-center">
              <Loading class="size-16 color-hex-8b8b8b" />
            </li>
          </template>
        </LoadingBox>
      </ul>
    </Box>
  </section>
</template>

<style lang="scss" scoped>
</style>
